@import './style.less';

@riskIcon-prefix:       ~"@{prefix}-riskIcon";

.@{riskIcon-prefix} {
  padding: 2px 10px;
  border: 1px solid @default-color;
  border-radius: 20px;
  font-size: 12px;
  font-family: arial;
  width: 100px;
  line-height: 24px;

  .riskScore {
    display: inline-block;
    position: relative;
    width: 25px;
    height: 25px;
    left: -8px;
    text-align: center;
    border-radius: 50%;
    background-color: @default-color;
    color: #fff;
  }

  .riskStatus {
    color: @default-color;
  }

  &&-Reject {
    border-color: @reject-color;

    .riskScore {
      background-color: @reject-color;
    }

    .riskStatus {
      color: @reject-color;
    }
  }

  &&-Accept {
    border-color: @accept-color;

    .riskScore {
      background-color: @accept-color;
    }

    .riskStatus {
      color: @accept-color;
    }
  }

  &&-Review {
    border-color: @review-color;

    .riskScore {
      background-color: @review-color;
    }

    .riskStatus {
      color: @review-color;
    }
  }
}
